<template>
  <div class="about">
    <fm-generate-form :data="jsonData" ref="generateForm"> </fm-generate-form>
    <el-button type="primary" @click="submit($refs.generateForm)"
      >提交</el-button
    >
    <el-button type="info" @click="reset($refs.generateForm)">重置</el-button>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

interface Data {
  list: any[];
  config: Config;
}
interface Config {
  labelWidth: number;
  labelPosition: string;
  size: string;
  customClass: string;
}
@Component
export default class FormShow extends Vue {
  submit(val: any) {
    val.getData().then((res: any) => {
      const result = JSON.stringify(res);
      const _this: any = this;
      _this.$message.success(result);
    });
  }
  reset(val: any) {
    val.reset();
    const _this: any = this;
    _this.$message.success("数据重置成功!");
  }
  jsonData: any = {
    list: [
      {
        type: "grid",
        name: "栅格布局",
        icon: "icon-grid-",
        columns: [
          {
            span: 12,
            list: [
              {
                type: "date",
                name: "日期选择器",
                icon: "icon-date",
                options: {
                  defaultValue: "",
                  readonly: false,
                  disabled: false,
                  editable: true,
                  clearable: true,
                  placeholder: "",
                  startPlaceholder: "",
                  endPlaceholder: "",
                  type: "date",
                  format: "yyyy-MM-dd",
                  timestamp: false,
                  required: false,
                  width: "",
                  remoteFunc: "func_1569904505000_72925"
                },
                key: "1569904505000_72925",
                model: "date_1569904505000_72925",
                rules: []
              }
            ]
          },
          {
            span: 12,
            list: [
              {
                type: "rate",
                name: "评分",
                icon: "icon-pingfen1",
                options: {
                  defaultValue: 0,
                  max: 5,
                  disabled: false,
                  allowHalf: false,
                  required: false,
                  remoteFunc: "func_1569904508000_40651"
                },
                key: "1569904508000_40651",
                model: "rate_1569904508000_40651",
                rules: []
              }
            ]
          }
        ],
        options: {
          gutter: 0,
          justify: "start",
          align: "top",
          remoteFunc: "func_1569904499000_94493"
        },
        key: "1569904499000_94493",
        model: "grid_1569904499000_94493",
        rules: []
      },
      {
        type: "slider",
        name: "滑块",
        icon: "icon-slider",
        options: {
          defaultValue: 0,
          disabled: false,
          required: false,
          min: 0,
          max: 100,
          step: 1,
          showInput: false,
          range: false,
          width: "",
          remoteFunc: "func_1569904510000_10527"
        },
        key: "1569904510000_10527",
        model: "slider_1569904510000_10527",
        rules: []
      },
      {
        type: "grid",
        name: "栅格布局",
        icon: "icon-grid-",
        columns: [
          {
            span: 12,
            list: [
              {
                type: "date",
                name: "日期选择器",
                icon: "icon-date",
                options: {
                  defaultValue: "",
                  readonly: false,
                  disabled: false,
                  editable: true,
                  clearable: true,
                  placeholder: "",
                  startPlaceholder: "",
                  endPlaceholder: "",
                  type: "date",
                  format: "yyyy-MM-dd",
                  timestamp: false,
                  required: false,
                  width: "",
                  remoteFunc: "func_1569904519000_98421"
                },
                key: "1569904519000_98421",
                model: "date_1569904519000_98421",
                rules: []
              }
            ]
          },
          {
            span: 12,
            list: [
              {
                type: "checkbox",
                name: "多选框组",
                icon: "icon-check-box",
                options: {
                  inline: false,
                  defaultValue: [],
                  showLabel: false,
                  options: [
                    { value: "选项1" },
                    { value: "选项2" },
                    { value: "选项3" }
                  ],
                  required: false,
                  width: "",
                  remote: false,
                  remoteOptions: [],
                  props: { value: "value", label: "label" },
                  remoteFunc: "func_1569904523000_46290",
                  disabled: false
                },
                key: "1569904523000_46290",
                model: "checkbox_1569904523000_46290",
                rules: []
              }
            ]
          }
        ],
        options: {
          gutter: 0,
          justify: "start",
          align: "top",
          remoteFunc: "func_1569904517000_23523"
        },
        key: "1569904517000_23523",
        model: "grid_1569904517000_23523",
        rules: []
      },
      {
        type: "select",
        name: "下拉选择框",
        icon: "icon-select",
        options: {
          defaultValue: "",
          multiple: false,
          disabled: false,
          clearable: false,
          placeholder: "",
          required: false,
          showLabel: false,
          width: "",
          options: [
            { value: "下拉框1" },
            { value: "下拉框2" },
            { value: "下拉框3" }
          ],
          remote: false,
          filterable: false,
          remoteOptions: [],
          props: { value: "value", label: "label" },
          remoteFunc: "func_1569904526000_36712"
        },
        key: "1569904526000_36712",
        model: "select_1569904526000_36712",
        rules: []
      }
    ],
    config: { labelWidth: 100, labelPosition: "right", size: "small" }
  };
}
</script>
